<template>
  <!-- 左侧框 -->
  <div class="left-container">
    <!-- 标题部分 -->
    <div class="choose-header">
      <el-input
        placeholder="请输入关键字"
        suffix-icon="el-icon-search"
        v-model="input1"
        style="width: 260px; margin-left: 10px"
      >
      </el-input>
    </div>
    <!-- 树形结构 -->
    <div class="tree-container">
      <div v-for="(item, index) in tree" :key="index">
        <div class="tree-box">
          <!-- 树形标题 -->
          <div class="title" @click="item.showchild = !item.showchild">
            <i
              :class="
                item.showchild ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
              "
              style="margin-right: 15px"
            />
            <span style="margin-right: 1px">{{ item.name }}</span>
         
          </div>
          <!-- 群组部分 -->
          <div v-show="item.showchild" class="group">
            <div
              v-for="(i, l) in item.children"
              :key="l"
              :label="i.name"
              class="node"
              @change="emitSel($event, i, index, i.name, item.value)"
              :checked="l === 0 && index === 0"
            >
              <div class="con">
                <span>{{ i.name }}</span>
               
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils'

export default {
  props: {
    tree: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      input1: "",
      checkList: [],
      checkKeys: [],
      sourceData: [],
      defaultSourceData: [],
    };
  },
  watch: {
    tree: {
      handler(newVal) {
        // 设置返回值结构
        this.setSourceData();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    setSourceData() {
      this.$nextTick(() => {
        if (this.tree.length > 0) {
          this.sourceData = [];
          this.tree.forEach((item) => {
            this.sourceData.push({
              source: item.value,
              sourceValues: [],
            });
          });
          this.defaultSourceData = deepClone(this.sourceData);
        }
      });
    },
    emitSel(e, obj, index, value) {
      if (e) {
        this.checkKeys.push(obj);
      } else {
        this.checkKeys = this.checkKeys.filter((i) => {
          return i.name != value;
        });
      }
      this.sourceData = deepClone(this.defaultSourceData);
      const tags = [];
      if (this.checkKeys.length > 0) {
        this.checkKeys.forEach((item) => {
          this.sourceData.forEach((i) => {
            if (item.source == i.source) {
              i.sourceValues.push(item.value);
            }
          });
        });
      }
      this.$emit("emitSel", this.sourceData, this.checkList);
    },
    handleReset() {
      this.checkList = [];
      this.checkKeys = [];
      this.$emit("emitSel", []);
    },
    setChecked(data) {
      this.$nextTick(() => {
        this.checkList = deepClone(data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#app.dark-theme .left-container .choose-header .title {
  color: #fff !important;
}
.left-container {
  padding: 15px 0 0 3px;
  border-top: none !important;
  // 标题样式
  .choose-header {
    width: 100%;
    height: 40px;
    padding-right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    .title {
      font-size: 16px;
      color: #303032;
      line-height: 24px;
      font-weight: 700;
      text-align: left;
      margin: 0 0 0 10px;
    }
    // 清空内容
    .reset {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
      cursor: pointer;
    }
    .reset:hover {
      border-bottom: 1px solid #4b6eef;
      cursor: pointer;
      color: #4b6eef;
    }
  }
  //   树形结构
  .tree-container {
    padding: 8px;
    width: 100%;
    flex: 1;
    overflow: auto;
    font-size: 14px;
    // 下面盒子
    .tree-box {
      padding: 0 0 0 0;
      //   标题部分
      .title {
        padding: 10px;
        background: #f8f8f8;
        display:flex
        // margin-bottom: 10px;
        i {
          margin-right: 10px;
        }
      }
      //   复选框群部分
      .group {
        padding-left: 15px;
        padding-top: 10px;
        margin-left: 20px;
        // 单个节点
        .node {
          width: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 10px 0;
          //   文字部分
          .con {
            width: 159px;
            display: flex;
            justify-content: space-between;
            color: #303032;
          }
        }
      }
    }
  }
}
</style>
